<template>
    <div class="home">
        <header class="tc ">
            <h1 class="title pr pr20 pl20 f35 cfff fn">
               <router-link class="img pa " to="/nearbyStores">
                    <i  class="el-icon-arrow-left  f40 cfff"></i>
                </router-link>
                    门店详情
            </h1>
        </header>
        <main class="p20 ">
            <section class="main-station bcfff mb20 f20">
                <img class="pic mb40" :src="listTable.licensePicture">
                <h1 class="f30 fn mb15"> {{listTable.location}} </h1>
                <div class="wrap flex mb20 f16">
                    <div class="mr20">
                        <van-icon v-for="(el,index) in listTable.star" :key="index" name="star" color="rgb(255,191,0)" size="20rem"></van-icon>
                        <span class="f25">{{ listTable.star }}分</span>
                    </div>
                    <div class="f25">
                        销量：<span >5555</span>
                    </div>
                </div>
                <div class="wrap flex">
                    <div>
                        <p class="mb20 f25">营业时间：{{obj.date}}   {{renderTime(listTable.createTime)}}</p>
                        <p class="f25"> 位置：{{ listTable.address }}
                            <img @click="navigation" class="plane ml25" src="../../../assets/img/wash-car-img/plane.png" alt="">
                        </p>
                    </div>
                </div>
            </section>
            <section class="main-service bcfff mb20" >
                <div class="wrap mb20 ">
                    <h1 class="f30 fn">服务项目</h1>
                </div>
                <div class="wrap  mt20">
                    <div v-for="el in itemArr" class="flex jcsb item-list p25">
                        <p class="lh40 f25">{{ el.itemName }}</p>
                        <p class="cff4 f25 ">{{ el.realPrice }}<del class="ml20 c808">{{ el.falsePrice }}</del></p> 
                    </div>
                </div>
            </section>
            <section class="main-appraise bcfff mb20">
                <div class="wrap mb20 ">
                    <div>
                        <h1 class="f30 fn">服务评价</h1>
                    </div>
                </div>
                <div class="content mb20 flex f20" v-for=" el in arr" >
                    <img class="avatar mr25" :src="listTable.licensePicture">
                    <div class="fg1">
                        <div class="flex jcsb mb20">
                            <h2 class="f25 ">{{ listTable.principal }}</h2>
                            <span class="c808">{{ renderTime(listTable.modifyTime) }}</span>
                        </div>
                        <div class=" mb30">
                            <van-icon v-for="(el,index) in listTable.star" :key="index" name="star" color="rgb(255,191,0)" size="20rem"></van-icon>
                        </div>
                        <div>
                            <p class="f25"> {{listTable.introduce}}</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <ul class="footer  bcff  pf w100 f20 ">
            <li class="f25 tc mt25  ">
                <a @click="immediatelyReservation" class="cfff btn dbc">立即预约</a>
            </li>
        </ul> 
    </div>
</template>
<script>
export default{
    mounted(){
        // console.log(this.$route.query.el);
        this.listTable = this.$route.query.el;
        // this.id  = this.$route.query.id
    },
    methods:{
        onShow(){
            this.isCall = true;
            this.isShade = true;
        },
        onCancel(){
            this.isCall = false;
            this.isShade = false;
        },
        navigation(){
            this.$router.push('storeDetailsNavigation')
        },
        immediatelyReservation(){
            this.$router.push({
                path:'/immediatelyReservation',query:{el:this.listTable}
            })
        },
        renderTime(date) {
            var dateee = new Date(date).toJSON();
            return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        }
    },
    data(){
        return{
            listTable:{},
            id:'',
            address:'',
            isCall:false,
            isShade:false,
            itemArr:[{itemName:"工时价格（每小时)",realPrice:"￥35.9",falsePrice:"￥60",},
                {itemName:"轮胎",realPrice:"￥35.9",falsePrice:"￥60",},
                {itemName:"...", realPrice:"￥35.9",falsePrice:"￥60",}],
            arr:[{detail:"洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!"},
                {detail:"洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!" },
                {detail:"洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!" }],
            obj:{date:"周一至周五",time:"早上8:00-晚上22:00",}   
        }
    }
}
</script>
<style scoped>
.item-list{border-bottom: 2rem solid #f7f7f7;}
.item-list:last-child{border-bottom: 0;}
ul.footer li a.btn{padding: 20rem 0;display: block;width: 650rem;border-radius: 40rem;background-color: #0d65e8;color: #fff;}
a{color: #333;}
.c000{color: #000;}
.lh40{line-height: 40rem;}
.cff4{color: #ff4000;}
.c808{color:#808080}
.line{height: 1rem;background-color: #f7f7f7;}
.home{background-color: #f7f7f7;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

main {margin-top: -310rem;margin-bottom: 120rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
section.main-station  img.pic{width: 650rem;height: 420rem;margin: 0 auto;border-radius: 15rem;} 
section.main-station  img.plane{width: 30rem;height: auto;vertical-align: middle;} 
/* 服务项目 */
section.main-service .wrap label{margin-right: 30rem;}
section.main-service .wrap input{margin-right: 15rem;height: 20rem;width: 20rem;vertical-align: middle;}
/* 服务评价 */
section.main-appraise .content {padding-bottom: 30rem; border-bottom: 2rem solid #f7f7f7;}
section.main-appraise :last-child{padding-bottom: 0; border-bottom: none;}
section.main-appraise img.avatar{width: 110rem;height: 110rem;border-radius: 50%;}
/* 页脚 */
ul.footer{height: 115rem;left: 0; bottom:0;padding: 0 20rem;box-sizing: border-box; background-color: #fff;}
ul.footer img.waiter{height: 40rem; width: auto;vertical-align: middle;}
ul.footer a.pay-order{background-color: #1e72f0;padding: 20rem 50rem;border-radius: 50rem;}
</style>